<template>
  <div class="aside-bar">
    <div class="aside-bar-header">
      <img src="/images/sideBar2.png" alt="sideBar-title" class="aside-bar-title-img" />
      <div class="aside-bar-title-text">{{ title }}</div>
    </div>
    <ul class="aside-bar-list">
      <li class="aside-bar-item" v-for="item in menuListProp" :key="item.id">
        <div class="aside-bar-item-main" :class="{active: isActiveItem(item)}" @click="onItemClick(item)">
          <Icon :style="{opacity: isActiveItem(item) ? 1 : 0}" name="icon-aside-bar" class="aside-bar-icon" />
          <span class="aside-bar-text">{{item.name}}</span>
          <Icon
            v-if="(item.children && (isActiveItem(item) || expandedIds.includes(item.id))) || (!item.children && isActiveItem(item))"
            name="icon-aside-bar1"
            class="aside-bar-arrow"
            :class="{expanded: expandedIds.includes(item.id)}"
          />
        </div>
        <ul v-if="item.children && item.children.length && expandedIds.includes(item.id)" class="aside-bar-sub-list">
          <li v-for="sub in item.children" :key="sub.id" :class="['aside-bar-sub-item', {active: sub.id === modelValue} ]" @click.stop="selectSub(item, sub)">
            <span class="dot" :class="{red: sub.id === modelValue}"></span>
            <span class="sub-text" :class="{red: sub.id === modelValue}">{{sub.name}}</span>
            <Icon v-if="sub.id === modelValue" name="icon-aside-bar1" class="aside-bar-arrow sub-arrow" />
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, onMounted } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  menuList: {
    type: Array,
    default: () => ([])
  },
  modelValue: {
    type: [String, Number],
    default: null
  }
})
const emit = defineEmits(['update:modelValue'])
const menuListProp = computed(() => props.menuList)
const expandedIds = ref<number[]>([])

function isActiveItem(item: any) {
  if (item.children && item.children.length) {
    return item.children.some((sub: any) => sub.id === props.modelValue)
  }
  return item.id === props.modelValue
}

function onItemClick(item: any) {
  if (item.children && item.children.length) {
    toggleExpand(item)
  } else {
    emit('update:modelValue', item.id)
  }
}

function toggleExpand(item: any) {
  if (!item.children) return
  const idx = expandedIds.value.indexOf(item.id)
  if (idx > -1) {
    expandedIds.value.splice(idx, 1)
  } else {
    expandedIds.value.push(item.id)
  }
}

function selectSub(item: any, sub: any) {
  emit('update:modelValue', sub.id)
}

// 自动展开包含当前高亮子菜单的一级菜单
function autoExpandByActiveId() {
  expandedIds.value = []
  menuListProp.value.forEach((item: any) => {
    if (item.children && item.children.some((sub: any) => sub.id === props.modelValue)) {
      expandedIds.value.push(item.id)
    }
  })
}

watch(() => props.modelValue, () => {
  autoExpandByActiveId()
}, {immediate: true})
</script>

<style scoped lang="less">
.aside-bar {
  margin-top: 0;
  margin-left: 0;
  min-width: 280px;
  height: 500px;
  min-height: unset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

  .aside-bar-header {
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, #b63a3a 0%, #e07a7a 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    .aside-bar-title-img {
      width: 100%;
      height: 100px;
      object-fit: contain;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .aside-bar-title-text {
      position: absolute;
      left: 44px;
      top: 34px;
      z-index: 2;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      width: auto;
      min-width: 95px;
      min-height: 33px;
      line-height: 33px;
      background: none;
      display: inline-block;
      letter-spacing: 1px;
    }
  }

  .aside-bar-list {
    background-image: url(/images/asideBar.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    width: 279px;
    height: 400px;
    opacity: 1;
    flex: 1;
    padding: 0;
    margin: 0;
    list-style: none;
    .aside-bar-item {
      display: block;
      border-bottom: 1px solid #f2f2f2;
      &:last-child {
        border-bottom: none;
      }
      .aside-bar-item-main {
        display: flex;
        align-items: center;
        padding: 0 24px 0 18px;
        height: 48px;
        cursor: pointer;
        transition: background 0.2s;
        user-select: none;
        &:hover {
          background: rgba(230,58,58,0.06);
        }
        &.active {
          background: rgba(230,58,58,0.06);
          color: #b63a3a;
          .aside-bar-text {
            color: #b63a3a;
          }
        }
        .aside-bar-icon {
          width: 20px;
          height: 20px;
          margin-right: 10px;
          color: #b63a3a;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .aside-bar-text {
          flex: 1;
          font-size: 18px;
          color: #333;
          font-weight: 700;
          text-align: left;
          display: flex;
          align-items: center;
        }
        .aside-bar-arrow {
          width: 16px;
          height: 16px;
          margin-left: 8px;
          color: #b63a3a;
          transition: transform 0.2s;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          &.expanded {
            transform: rotate(90deg);
          }
        }
      }
      // 没有子菜单的一级菜单字体常规
      .aside-bar-item-main:not(:has(+ .aside-bar-sub-list)) .aside-bar-text {
        font-weight: 500;
      }
      .aside-bar-sub-list {
        padding-left: 38px;
        margin: 0;
        list-style: none;
        background: none;
        .aside-bar-sub-item {
          margin-right: 25px;
          display: flex;
          align-items: center;
          height: 36px;
          font-size: 15px;
          color: #888;
          .dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #ccc;
            margin-right: 10px;
          }
          .sub-text {
            cursor: pointer;
            flex: 1;
            color: #888;
            font-size: 15px;
          }
          .sub-arrow {
            width: 14px;
            height: 14px;
            margin-left: 8px;
            color: #b63a3a;
          }
          &.active {
            .dot {
              background: #b63a3a;
            }
            .sub-text {
              color: #b63a3a;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>